<template>
  <div>
    <van-search v-model="value" placeholder="请输入资讯关键词搜索" />
    <van-tabs v-model="active" color="#1989fa">
      <van-tab title="行业资讯">
        <div>
          <van-cell-group>
            <van-cell title="新闻标题" :value="content" label="描述信息" center is-link>
            </van-cell>
            <van-cell title="新闻标题" :value="content" label="描述信息" center is-link>
            </van-cell>
            <van-cell title="新闻标题" :value="content" label="描述信息" center is-link>
            </van-cell>
            <van-cell title="新闻标题" :value="content" label="描述信息" center is-link>
            </van-cell>
          </van-cell-group>
        </div>
      </van-tab>
      <van-tab title="个性推荐">
        <div>
        <van-cell-group>
            <van-cell :value="content" label="描述信息" center is-link>
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <span class="custom-title">新闻标题</span>
                <van-tag type="danger">标签</van-tag>
              </template>
            </van-cell>
            <van-cell :value="content" label="描述信息" center is-link>
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <span class="custom-title">新闻标题</span>
                <van-tag type="primary">标签</van-tag>
              </template>
            </van-cell>
            <van-cell :value="content" label="描述信息" center is-link>
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <span class="custom-title">新闻标题</span>
                <van-tag type="success">标签</van-tag>
              </template>
            </van-cell>
            <van-cell :value="content" label="描述信息" center is-link>
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <span class="custom-title">新闻标题</span>
                <van-tag type="warning">标签</van-tag>
              </template>
            </van-cell>
          </van-cell-group>
          </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Search, Tab, Tabs, Cell, CellGroup, Tag } from "vant";

Vue.use(Search);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Tag);

export default {
  data() {
    return {
      active: 0,
      content: "内容"
    };
  },
};
</script>

<style scoped>
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}
</style>
